<script setup>
import { defineProps } from 'vue'
import {
  Document,
  Menu as IconMenu,
} from '@element-plus/icons-vue'

const props = defineProps({
  menuItem: {
    type: Object,
    default: () => ({})
  }
})
</script>

<template>
  <template v-if="!menuItem.meta.hidden">
    <template v-if="!menuItem.children || !menuItem.children.length">
      <RouterLink
        :to="{
          path: menuItem.path
        }"
      >
        <el-menu-item
          :index="menuItem.path"
          :router="{
            path: menuItem.path
          }"
        >
          <el-icon><Document /></el-icon>
          <span>{{ menuItem.meta.title || menuItem.path }}</span>
        </el-menu-item>
      </RouterLink>
    </template>
    <el-sub-menu
      v-else
      :index="menuItem.path"
    >
      <template #title>
        <el-icon><IconMenu /></el-icon>
        <span>{{ menuItem.meta.title || menuItem.path }}</span>
      </template>
      <template
        v-for="it of menuItem.children"
        :key="it.path"
      >
        <AsideItem
          :menu-item="it"
        />
      </template>
    </el-sub-menu>
  </template>
</template>

<style scoped>
a {
  color: beige;
}
</style>
